<template>
  <div
    class="admin-layout"
    :class="{ 'sidebar-collapsed': collapsed }"
  >
    <!-- 侧边栏 -->
    <aside class="sidebar" :class="{ collapsed: collapsed }">
      <div class="sidebar-header">
        <div class="logo">
          <img class="logo-icon" src="/logo.png" alt="个人博客" />
          <span v-if="!collapsed" class="logo-text">博客管理</span>
        </div>
        <button class="collapse-btn" @click="collapsed = !collapsed">
          <Icon :name="collapsed ? 'fa:chevron-right' : 'fa:chevron-left'" />
        </button>
      </div>

      <nav class="sidebar-nav">
        <!-- 主导航 -->
        <div class="nav-group">
          <div class="nav-header" v-if="!collapsed">
            <span class="nav-title">主导航</span>
          </div>
          <ul class="nav-menu">
            <li
              class="nav-item"
              :class="{ active: currentRoute === 'dashboard' }"
            >
              <NuxtLink to="/admin" class="nav-link">
                <div class="nav-icon-wrapper">
                  <Icon name="ep:histogram" class="nav-icon" />
                  <div class="nav-icon-bg"></div>
                </div>
                <span v-if="!collapsed" class="nav-text">仪表盘</span>
                <div v-if="!collapsed" class="nav-indicator"></div>
              </NuxtLink>
            </li>
          </ul>
        </div>

        <!-- 内容管理 -->
        <div class="nav-group">
          <div class="nav-header" v-if="!collapsed">
            <span class="nav-title">内容管理</span>
          </div>
          <ul class="nav-menu">
            <li
              class="nav-item"
              :class="{ active: currentRoute === 'projects' }"
            >
              <NuxtLink to="/admin/projects" class="nav-link">
                <div class="nav-icon-wrapper">
                  <Icon name="ix:project" class="nav-icon" />
                  <div class="nav-icon-bg"></div>
                </div>
                <span v-if="!collapsed" class="nav-text">项目管理</span>
                <div v-if="!collapsed" class="nav-indicator"></div>
              </NuxtLink>
            </li>
            <li
              class="nav-item"
              :class="{ active: currentRoute === 'categories' }"
            >
              <NuxtLink to="/admin/categories" class="nav-link">
                <div class="nav-icon-wrapper">
                  <Icon name="fa:folder" class="nav-icon" />
                  <div class="nav-icon-bg"></div>
                </div>
                <span v-if="!collapsed" class="nav-text">分类管理</span>
                <div v-if="!collapsed" class="nav-indicator"></div>
              </NuxtLink>
            </li>
            <li class="nav-item" :class="{ active: currentRoute === 'tags' }">
              <NuxtLink to="/admin/tags" class="nav-link">
                <div class="nav-icon-wrapper">
                  <Icon name="fa:tags" class="nav-icon" />
                  <div class="nav-icon-bg"></div>
                </div>
                <span v-if="!collapsed" class="nav-text">标签管理</span>
                <div v-if="!collapsed" class="nav-indicator"></div>
              </NuxtLink>
            </li>
            <li
              class="nav-item"
              :class="{ active: currentRoute === 'contentManage' }"
            >
              <NuxtLink to="/admin/contentManage" class="nav-link">
                <div class="nav-icon-wrapper">
                  <Icon name="fa:book" class="nav-icon" />
                  <div class="nav-icon-bg"></div>
                </div>
                <span v-if="!collapsed" class="nav-text">内容管理</span>
                <div v-if="!collapsed" class="nav-indicator"></div>
              </NuxtLink>
            </li>
            <li
              class="nav-item"
              :class="{ active: currentRoute === 'skills' }"
            >
              <NuxtLink to="/admin/skills" class="nav-link">
                <div class="nav-icon-wrapper">
                  <Icon name="fa:book" class="nav-icon" />
                  <div class="nav-icon-bg"></div>
                </div>
                <span v-if="!collapsed" class="nav-text">我的技能</span>
                <div v-if="!collapsed" class="nav-indicator"></div>
              </NuxtLink>
            </li>
          </ul>
        </div>

        <!-- 系统管理 -->
        <div class="nav-group">
          <div class="nav-header" v-if="!collapsed">
            <span class="nav-title">系统管理</span>
          </div>
          <ul class="nav-menu">
            <!-- 用户管理 -->
            <li class="nav-item" :class="{ active: currentRoute === 'users' }">
              <NuxtLink to="/admin/users" class="nav-link">
                <div class="nav-icon-wrapper">
                  <Icon name="fa:users" class="nav-icon" />
                  <div class="nav-icon-bg"></div>
                </div>
                <span v-if="!collapsed" class="nav-text">用户管理</span>
                <div v-if="!collapsed" class="nav-indicator"></div>
              </NuxtLink>
            </li>
            <!-- 文件管理 -->
            <li class="nav-item" :class="{ active: currentRoute === 'files' }">
              <NuxtLink to="/admin/files" class="nav-link">
                <div class="nav-icon-wrapper">
                  <Icon name="fa:file" class="nav-icon" />
                  <div class="nav-icon-bg"></div>
                </div>
                <span v-if="!collapsed" class="nav-text">文件管理</span>
                <div v-if="!collapsed" class="nav-indicator"></div>
              </NuxtLink>
            </li>
            <!-- 系统设置 -->
            <li
              class="nav-item"
              :class="{ active: currentRoute === 'settings' }"
            >
              <NuxtLink to="/admin/settings" class="nav-link">
                <div class="nav-icon-wrapper">
                  <Icon name="fa:cog" class="nav-icon" />
                  <div class="nav-icon-bg"></div>
                </div>
                <span v-if="!collapsed" class="nav-text">系统设置</span>
                <div v-if="!collapsed" class="nav-indicator"></div>
              </NuxtLink>
            </li>
          </ul>
        </div>

        <!-- 工具 -->
        <div class="nav-group">
          <div class="nav-header" v-if="!collapsed">
            <span class="nav-title">工具</span>
          </div>
          <ul class="nav-menu">
            <li class="nav-item">
              <a href="#" class="nav-link" @click.prevent="handleBackup">
                <div class="nav-icon-wrapper">
                  <Icon name="fa:download" class="nav-icon" />
                  <div class="nav-icon-bg"></div>
                </div>
                <span v-if="!collapsed" class="nav-text">数据备份</span>
                <div v-if="!collapsed" class="nav-indicator"></div>
              </a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link" @click.prevent="handleStatistics">
                <div class="nav-icon-wrapper">
                  <Icon name="fa:pie-chart" class="nav-icon" />
                  <div class="nav-icon-bg"></div>
                </div>
                <span v-if="!collapsed" class="nav-text">统计分析</span>
                <div v-if="!collapsed" class="nav-indicator"></div>
              </a>
            </li>
          </ul>
        </div>
      </nav>
    </aside>

    <!-- 主内容区域 -->
    <main class="main-content">
      <header class="top-header">
        <!-- 左侧：移动端菜单按钮和页面信息 -->
        <div class="header-left">
          <button
            class="mobile-menu-btn"
            @click="collapsed = !collapsed"
            v-if="isMobile"
          >
            <Icon name="fa:bars" />
          </button>

          <div class="page-info">
            <h1 class="page-title">{{ getPageTitle() }}</h1>
            <nav class="breadcrumb">
              <span
                class="breadcrumb-item"
                v-for="(item, index) in breadcrumbs"
                :key="index"
              >
                <NuxtLink
                  v-if="item.path"
                  :to="item.path"
                  class="breadcrumb-link"
                >
                  {{ item.title }}
                </NuxtLink>
                <span v-else class="breadcrumb-current">{{ item.title }}</span>
                <span
                  v-if="index < breadcrumbs.length - 1"
                  class="breadcrumb-separator"
                  >/</span
                >
              </span>
            </nav>
          </div>
        </div>

        <!-- 中间：搜索框 -->
        <div class="header-center" v-if="!isMobile">
          <div class="search-container">
            <Icon name="fa:search" class="search-icon" />
            <input
              type="text"
              v-model="searchQuery"
              placeholder="搜索文章、用户、设置..."
              class="search-input"
              @focus="showSearchSuggestions = true"
            />
            <div
              v-if="showSearchSuggestions && searchQuery"
              class="search-suggestions"
            >
              <div class="suggestion-item" @click="handleSearch('posts')">
                <Icon name="fa:file-text" />
                搜索文章 "{{ searchQuery }}"
              </div>
              <div class="suggestion-item" @click="handleSearch('users')">
                <Icon name="fa:users" />
                搜索用户 "{{ searchQuery }}"
              </div>
              <div class="suggestion-item" @click="handleSearch('settings')">
                <Icon name="fa:cog" />
                搜索设置 "{{ searchQuery }}"
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧：操作按钮和用户菜单 -->
        <div class="header-right">
          <div class="header-actions">
            <!-- 移动端搜索按钮 -->
            <button
              class="action-btn mobile-search-btn"
              @click="showMobileSearch = true"
              v-if="isMobile"
            >
              <Icon name="fa:search" />
            </button>

            <!-- 主题切换 -->
            <button
              class="action-btn"
              @click="toggleTheme"
              :title="isDark ? '切换到亮色主题' : '切换到暗色主题'"
            >
              <Icon :name="isDark ? 'oi:moon' : 'oi:sun'" />
            </button>

            <!-- 全屏切换 -->
            <button
              class="action-btn"
              @click="toggleFullscreen"
              :title="isFullscreen ? '退出全屏' : '全屏显示'"
            >
              <Icon :name="isFullscreen ? 'fa:compress' : 'fa:expand'" />
            </button>

            <!-- 通知中心 -->
            <div class="notification-badge">
              <button
                class="action-btn"
                @click="toggleNotifications"
                title="通知中心"
              >
                <Icon name="fa:bell" />
                <span v-if="unreadCount > 0" class="badge">{{
                  unreadCount > 99 ? "99+" : unreadCount
                }}</span>
              </button>
            </div>

            <!-- 快速操作菜单 -->
            <div class="quick-actions">
              <button
                class="action-btn"
                @click="toggleQuickActions"
                title="快速操作"
              >
                <Icon name="fa:bolt" />
              </button>
              <div v-if="quickActionsVisible" class="quick-actions-menu">
                <button
                  class="action-item"
                  @click="$router.push('/admin/posts/create')"
                >
                  <Icon name="fa:plus" />
                  新建文章
                </button>
                <button
                  class="action-item"
                  @click="$router.push('/admin/media/upload')"
                >
                  <Icon name="fa:upload" />
                  上传文件
                </button>
                <button
                  class="action-item"
                  @click="$router.push('/admin/users/create')"
                >
                  <Icon name="fa:user-plus" />
                  添加用户
                </button>
              </div>
            </div>

            <!-- 用户菜单 -->
            <div class="user-menu">
              <button class="user-profile" @click="toggleUserMenu">
                <div class="avatar-container">
                  <div v-if="!currentUser.avatar" class="avatar-placeholder">
                    {{ getInitials(currentUser.username) }}
                  </div>
                  <img
                    v-else
                    :src="currentUser.avatar"
                    :alt="currentUser.username"
                    class="user-avatar"
                  />
                  <div
                    class="online-status"
                    :class="{ online: currentUser.status === 'active' }"
                  ></div>
                </div>
                <div class="user-info" v-if="!isMobile">
                  <span class="username">{{ currentUser.username }}</span>
                  <span class="user-role">{{
                    formatRole(currentUser.role)
                  }}</span>
                </div>
                <Icon name="fa:chevron-down" class="dropdown-icon" />
              </button>

              <div v-if="userMenuVisible" class="user-dropdown">
                <div class="user-profile-card">
                  <div class="avatar-container">
                    <div
                      v-if="!currentUser.avatar"
                      class="avatar-placeholder-large"
                    >
                      {{ getInitials(currentUser.username) }}
                    </div>
                    <img
                      v-else
                      :src="currentUser.avatar"
                      :alt="currentUser.username"
                      class="user-avatar-large"
                    />
                    <div
                      class="online-status"
                      :class="{ online: currentUser.status === 'active' }"
                    ></div>
                  </div>
                  <div class="user-details">
                    <div class="username">{{ currentUser.username }}</div>
                    <div class="user-email">{{ currentUser.email }}</div>
                    <div class="user-role-badge">
                      {{ formatRole(currentUser.role) }}
                    </div>
                  </div>
                </div>

                <div class="dropdown-divider"></div>

                <NuxtLink
                  to="/admin/profile"
                  class="dropdown-item"
                  @click="userMenuVisible = false"
                >
                  <Icon name="fa:user" />
                  个人资料
                </NuxtLink>
                <NuxtLink
                  to="/admin/settings"
                  class="dropdown-item"
                  @click="userMenuVisible = false"
                >
                  <Icon name="fa:cog" />
                  系统设置
                </NuxtLink>
                <button class="dropdown-item" @click="handleHelp">
                  <Icon name="fa:question-circle" />
                  帮助中心
                </button>

                <div class="dropdown-divider"></div>

                <button class="dropdown-item logout-btn" @click="handleLogout">
                  <Icon name="fa:sign-out" />
                  退出登录
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 移动端搜索面板 -->
        <div v-if="showMobileSearch" class="mobile-search-panel">
          <div class="search-header">
            <Icon name="fa:search" class="search-icon" />
            <input
              type="text"
              v-model="searchQuery"
              placeholder="搜索..."
              class="search-input"
              ref="mobileSearchInput"
            />
            <button class="close-btn" @click="showMobileSearch = false">
              <Icon name="fa:times" />
            </button>
          </div>
        </div>
      </header>

      <div class="page-content">
        <div class="content-container">
          <NuxtPage />
        </div>
      </div>

      <footer class="page-footer">
        <div class="footer-content">
          <span class="copyright">© 2025 博客管理系统 v1.0.0</span>
          <div class="footer-links">
            <a href="#" class="footer-link">帮助文档</a>
            <span class="footer-separator">|</span>
            <a href="#" class="footer-link">反馈建议</a>
          </div>
        </div>
      </footer>
    </main>

    <!-- 通知抽屉 -->
    <div v-if="notificationDrawerVisible" class="notification-drawer">
      <div class="drawer-header">
        <h3>通知中心</h3>
        <button class="close-btn" @click="notificationDrawerVisible = false">
          <Icon name="fa:times" />
        </button>
      </div>
      <div class="notification-list">
        <div v-if="notifications.length === 0" class="empty-state">
          <Icon name="fa:bell-slash" />
          <p>暂无通知</p>
        </div>
        <div v-else>
          <div
            v-for="notification in notifications"
            :key="notification.id"
            class="notification-item"
            :class="{ unread: !notification.read }"
          >
            <div class="notification-icon">
              <Icon name="fa:bell" />
            </div>
            <div class="notification-content">
              <div class="notification-title">{{ notification.title }}</div>
              <div class="notification-message">
                {{ notification.description }}
              </div>
              <div class="notification-time">
                {{ formatTime(notification.createdAt) }}
              </div>
            </div>
            <button
              v-if="!notification.read"
              class="mark-read-btn"
              @click="markAsRead(notification.id)"
            >
              标记已读
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { AdminUser } from "~/types/admin";

// 响应式数据
const collapsed = ref(false);
const colorMode = useColorMode();
const isDark = computed(() => colorMode.value === 'dark');
const isFullscreen = ref(false);
const userMenuVisible = ref(false);
const notificationDrawerVisible = ref(false);
const quickActionsVisible = ref(false);
const showSearchSuggestions = ref(false);
const showMobileSearch = ref(false);
const searchQuery = ref("");
const isMobile = ref(false);
const unreadCount = ref(3);

// 路由相关
const route = useRoute();
const router = useRouter();

// 当前路由标识
const currentRoute = computed(() => {
  const path = route.path;
  if (path.includes("/projects")) return "projects";
  if (path.includes("/categories")) return "categories";
  if (path.includes("/tags")) return "tags";
  if (path.includes("/comments")) return "comments";
  if (path.includes("/media")) return "media";
  if (path.includes("/users")) return "users";
  if (path.includes("/settings")) return "settings";
  if (path.includes("/logs")) return "logs";
  if (path.includes("/contentManage")) return "contentManage";
  if (path.includes("/skills")) return "skills";
  if (path.includes("/files")) return "files";
  return "dashboard";
});

// 用户数据
const currentUser = ref<AdminUser>({
  id: "1",
  username: "管理员",
  email: "admin@example.com",
  avatar: "",
  role: "admin",
  status: "active",
  createdAt: "2025-01-01",
  updatedAt: "2025-01-01",
});

// 通知数据
const notifications = ref([
  {
    id: "1",
    title: "新评论待审核",
    description: "文章《Vue3开发指南》有新评论需要审核",
    read: false,
    createdAt: "2025-01-07 10:30",
  },
  {
    id: "2",
    title: "系统更新提醒",
    description: "博客系统已更新到v1.0.1版本",
    read: true,
    createdAt: "2025-01-06 15:20",
  },
  {
    id: "3",
    title: "新用户注册",
    description: '新用户"张三"已注册账号',
    read: false,
    createdAt: "2025-01-07 09:15",
  },
]);

// 计算属性
const breadcrumbs = computed(() => {
  const pathSegments = route.path.split("/").filter(Boolean);
  const crumbs = [];

  if (pathSegments.length > 0) {
    crumbs.push({ title: "首页", path: "/admin" });

    const routeMap: Record<string, string> = {
      projects: "项目管理",
      categories: "分类管理",
      tags: "标签管理",
      comments: "评论管理",
      media: "媒体库",
      users: "用户管理",
      settings: "系统设置",
      logs: "操作日志",
    };

    for (let i = 1; i < pathSegments.length; i++) {
      const segment = pathSegments[i];
      if (segment && routeMap[segment]) {
        crumbs.push({
          title: routeMap[segment],
          path:
            i === pathSegments.length - 1
              ? ""
              : `/${pathSegments.slice(0, i + 1).join("/")}`,
        });
      }
    }
  }

  return crumbs;
});

// 方法
const toggleTheme = () => {
  colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark';
};

const handleBackup = () => {
  ElMessage.info("数据备份功能开发中...");
};

const handleStatistics = () => {
  ElMessage.info("统计分析功能开发中...");
};

const toggleFullscreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
    isFullscreen.value = true;
  } else {
    document.exitFullscreen();
    isFullscreen.value = false;
  }
};

const toggleUserMenu = () => {
  userMenuVisible.value = !userMenuVisible.value;
};

const toggleNotifications = () => {
  notificationDrawerVisible.value = !notificationDrawerVisible.value;
};

const toggleQuickActions = () => {
  quickActionsVisible.value = !quickActionsVisible.value;
};

const handleSearch = (type: string) => {
  const searchMap = {
    posts: "/admin/posts",
    users: "/admin/users",
    settings: "/admin/settings",
  };
  if (searchMap[type as keyof typeof searchMap]) {
    router.push(
      `${searchMap[type as keyof typeof searchMap]}?search=${encodeURIComponent(
        searchQuery.value
      )}`
    );
  }
  showSearchSuggestions.value = false;
  searchQuery.value = "";
};

const markAsRead = (id: string) => {
  const notification = notifications.value.find((n) => n.id === id);
  if (notification) {
    notification.read = true;
  }
};

const handleLogout = () => {
  // 实际项目中调用登出API
  ElMessage.success("已退出登录");
  router.push("/admin/login");
};

const handleHelp = () => {
  window.open("/help", "_blank");
};

const formatTime = (time: string) => {
  return new Date(time).toLocaleString("zh-CN");
};

// 页面标题映射
const getPageTitle = () => {
  const routeNames = {
    dashboard: "仪表盘",
    projects: "项目管理",
    categories: "分类管理",
    tags: "标签管理",
    comments: "评论管理",
    media: "媒体库",
    users: "用户管理",
    settings: "系统设置",
    logs: "操作日志",
    profile: "个人资料",
    contentManage: "内容管理",
    skills:"技能管理",
    files: "文件管理",
  };
  return routeNames[currentRoute.value] || "博客管理系统";
};

// 获取用户名字首字母
const getInitials = (username: string) => {
  if (!username) return "U";
  return username.charAt(0).toUpperCase();
};

// 角色格式化
const formatRole = (role: string) => {
  const roleMap = {
    admin: "管理员",
    editor: "编辑",
  };
  return roleMap[role as keyof typeof roleMap] || role;
};

// 监听全屏状态变化和响应式检测
onMounted(() => {
  document.addEventListener("fullscreenchange", () => {
    isFullscreen.value = !!document.fullscreenElement;
  });

  // 检测移动端
  const checkMobile = () => {
    isMobile.value = window.innerWidth < 768;
  };

  checkMobile();
  window.addEventListener("resize", checkMobile);

  // 点击外部关闭菜单
  document.addEventListener("click", (e) => {
    const target = e.target as Element;

    if (!target.closest(".user-menu")) {
      userMenuVisible.value = false;
    }
    if (!target.closest(".quick-actions")) {
      quickActionsVisible.value = false;
    }
    if (!target.closest(".search-container")) {
      showSearchSuggestions.value = false;
    }
  });

  // 点击移动端搜索面板外部关闭
  document.addEventListener("click", (e) => {
    const target = e.target as Element;
    if (
      !target.closest(".mobile-search-panel") &&
      !target.closest(".mobile-search-btn")
    ) {
      showMobileSearch.value = false;
    }
  });
});

// 页面元数据
useHead({
  title: "博客管理系统",
  meta: [{ name: "robots", content: "noindex, nofollow" }],
});
</script>

<style scoped>
.admin-layout {
  min-height: 100vh;
  display: flex;
  background-color: var(--bg-color);
  transition: background-color 0.3s;
}

.admin-layout.dark {
  background-color: var(--dark-color);
}

/* 侧边栏样式 */
.sidebar {
  width: 256px;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-right: 1px solid var(--border-color);
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  z-index: 50;
}

.sidebar.collapsed {
  width: 80px;
}

.dark .sidebar {
  background: var(--dark-color);
  border-color: #374151;
}

.sidebar-header {
  padding: 1.2rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dark .sidebar-header {
  border-color: #374151;
}

.logo {
  display: flex;
  align-items: center;
  color: var(--primary-color);
  font-weight: bold;
  font-size: 1.125rem;
}

.logo-icon {
  width: 2rem;
  height: 2rem;
  border-radius:50%;
}

.logo-text {
  margin-left: 0.75rem;
  transition: opacity 0.3s;
}

.sidebar.collapsed .logo-text {
  opacity: 0;
}

.collapse-btn {
  padding: 0.5rem;
  color: #6b7280;
  transition: color 0.3s;
  border: none;
  background: none;
  cursor: pointer;
}

.collapse-btn:hover {
  color: var(--primary-color);
}

.dark .collapse-btn {
  color: #9ca3af;
}

.dark .collapse-btn:hover {
  color: #60a5fa;
}

/* 导航菜单样式 - 重新设计 */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.nav-group {
  position: relative;
}

.nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem 0.75rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(229, 231, 235, 0.5);
}

.dark .nav-header {
  border-color: rgba(75, 85, 99, 0.5);
}

.nav-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dark .nav-title {
  color: #9ca3af;
}

.nav-badge {
  background: linear-gradient(
    135deg,
    var(--primary-color),
    var(--secondary-color)
  );
  color: white;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.125rem 0.375rem;
  border-radius: 0.75rem;
  min-width: 1.25rem;
  text-align: center;
}

.nav-menu {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0 0.75rem;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  color: #374151;
  border-radius: 0.75rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.nav-link:hover {
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.1),
    rgba(139, 92, 246, 0.05)
  );
  color: var(--primary-color);
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.dark .nav-link {
  color: #d1d5db;
}

.dark .nav-link:hover {
  background: linear-gradient(
    135deg,
    rgba(96, 165, 250, 0.1),
    rgba(167, 139, 250, 0.05)
  );
  color: #60a5fa;
  box-shadow: 0 4px 12px rgba(96, 165, 250, 0.15);
}

.nav-icon-wrapper {
  position: relative;
  width: 2rem;
  height: 2rem;
  margin-right: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-icon {
  width: 1.25rem;
  height: 1.25rem;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
}

.nav-icon-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    var(--primary-color),
    var(--secondary-color)
  );
  border-radius: 0.5rem;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.3s ease;
}

.nav-link:hover .nav-icon-bg {
  opacity: 0.1;
  transform: scale(1);
}

.nav-item.active .nav-icon-bg {
  opacity: 0.15;
  transform: scale(1);
}

.nav-text {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark .nav-text {
  color: #d1d5db;
}

.nav-indicator {
  width: 0.375rem;
  height: 0.375rem;
  background: linear-gradient(
    135deg,
    var(--primary-color),
    var(--secondary-color)
  );
  border-radius: 50%;
  margin-left: 0.75rem;
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s ease;
}

.nav-item.active .nav-indicator {
  opacity: 1;
  transform: scale(1);
  animation: pulse 2s infinite;
}

.nav-badge-item {
  background: #ef4444;
  color: white;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.125rem 0.375rem;
  border-radius: 0.75rem;
  min-width: 1.25rem;
  text-align: center;
  margin-left: 0.5rem;
}

.nav-badge-item.new {
  background: linear-gradient(135deg, #10b981, #059669);
  animation: bounce 2s infinite;
}

.nav-item.active .nav-link {
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.15),
    rgba(139, 92, 246, 0.1)
  );
  color: var(--primary-color);
  border-left: 3px solid var(--primary-color);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.dark .nav-item.active .nav-link {
  background: linear-gradient(
    135deg,
    rgba(96, 165, 250, 0.15),
    rgba(167, 139, 250, 0.1)
  );
  color: #60a5fa;
  border-left-color: #60a5fa;
  box-shadow: 0 4px 12px rgba(96, 165, 250, 0.2);
}

.sidebar.collapsed .nav-text,
.sidebar.collapsed .nav-indicator,
.sidebar.collapsed .nav-badge-item {
  opacity: 0;
  width: 0;
  margin: 0;
  transform: translateX(-10px);
}

.sidebar.collapsed .nav-link {
  padding: 0.75rem;
  justify-content: center;
}

.sidebar.collapsed .nav-icon-wrapper {
  margin-right: 0;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

.sidebar-footer {
  padding: 1rem;
  border-top: 1px solid var(--border-color);
}

.dark .sidebar-footer {
  border-color: #374151;
}

.quick-action-btn {
  width: 100%;
  background: var(--primary-color);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: background-color 0.3s;
  border: none;
  cursor: pointer;
}

.quick-action-btn:hover {
  background: #0a49e0;
}

/* 主内容区域 */
.main-content {
  flex: 1;
  margin-left: 256px;
  transition: margin-left 0.3s;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.sidebar-collapsed .main-content {
  margin-left: 80px;
}

.dark .main-content {
  background-color: var(--dark-color);
}

/* 顶部导航栏 - 重新设计 */
.top-header {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid #e2e8f0;
  padding: 0.75rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(8px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark .top-header {
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  border-color: #374151;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3),
    0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

/* 头部左侧区域 */
.header-left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex: 1;
  min-width: 0;
}

.mobile-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  transition: all 0.2s;
  cursor: pointer;
}

.mobile-menu-btn:hover {
  background: #e2e8f0;
  color: #334155;
  transform: translateY(-1px);
}

.dark .mobile-menu-btn {
  background: #374151;
  border-color: #4b5563;
  color: #d1d5db;
}

.dark .mobile-menu-btn:hover {
  background: #4b5563;
  color: #f3f4f6;
}

.page-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  line-height: 1.2;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dark .page-title {
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #64748b;
}

.breadcrumb-link {
  color: #64748b;
  text-decoration: none;
  transition: all 0.2s;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
}

.breadcrumb-link:hover {
  color: #3b82f6;
  background: #f1f5f9;
  transform: translateY(-1px);
}

.dark .breadcrumb-link {
  color: #9ca3af;
}

.dark .breadcrumb-link:hover {
  color: #60a5fa;
  background: #374151;
}

.breadcrumb-current {
  color: #1e293b;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  background: #f1f5f9;
  border-radius: 0.375rem;
}

.dark .breadcrumb-current {
  color: #f3f4f6;
  background: #374151;
}

.breadcrumb-separator {
  color: #cbd5e1;
  font-weight: 300;
}

.dark .breadcrumb-separator {
  color: #4b5563;
}

/* 头部中间区域 - 搜索框 */
.header-center {
  flex: 0 1 400px;
  display: flex;
  justify-content: center;
}

.search-container {
  position: relative;
  width: 100%;
  max-width: 400px;
}

.search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  width: 1.25rem;
  height: 1.25rem;
  z-index: 10;
}

.search-input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 3rem;
  border: 2px solid #e2e8f0;
  border-radius: 1rem;
  background: #ffffff;
  font-size: 0.875rem;
  transition: all 0.3s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.search-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  transform: translateY(-1px);
}

.dark .search-input {
  background: #374151;
  border-color: #4b5563;
  color: #f3f4f6;
}

.dark .search-input:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}

.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  margin-top: 0.5rem;
  overflow: hidden;
  z-index: 50;
}

.dark .search-suggestions {
  background: #374151;
  border-color: #4b5563;
}

.suggestion-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  color: #374151;
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
}

.suggestion-item:last-child {
  border-bottom: none;
}

.suggestion-item:hover {
  background: #f8fafc;
  color: #3b82f6;
  transform: translateX(4px);
}

.dark .suggestion-item {
  color: #d1d5db;
  border-color: #4b5563;
}

.dark .suggestion-item:hover {
  background: #4b5563;
  color: #60a5fa;
}

/* 头部右侧区域 */
.header-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.action-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background: #f8fafc;
  color: #475569;
  border: 1px solid #e2e8f0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.action-btn:hover {
  background: #f1f5f9;
  color: #334155;
  border-color: #cbd5e1;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dark .action-btn {
  background: #374151;
  border-color: #4b5563;
  color: #d1d5db;
}

.dark .action-btn:hover {
  background: #4b5563;
  color: #f3f4f6;
  border-color: #6b7280;
}

.notification-badge {
  position: relative;
}

.badge {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 1rem;
  min-width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.375rem;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* 快速操作菜单 */
.quick-actions {
  position: relative;
}

.quick-actions-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  padding: 0.5rem;
  z-index: 50;
  min-width: 160px;
  animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dark .quick-actions-menu {
  background: #374151;
  border-color: #4b5563;
}

.action-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  background: none;
  border: none;
  color: #374151;
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
  font-size: 0.875rem;
}

.action-item:hover {
  background: #f1f5f9;
  color: #3b82f6;
  transform: translateX(4px);
}

.dark .action-item {
  color: #d1d5db;
}

.dark .action-item:hover {
  background: #4b5563;
  color: #60a5fa;
}

/* 用户菜单 */
.user-menu {
  position: relative;
  margin-left: 0.5rem;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  border-radius: 1rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  transition: all 0.3s;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  max-width: 200px;
  overflow: hidden;
}

.user-profile:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dark .user-profile {
  background: #374151;
  border-color: #4b5563;
}

.dark .user-profile:hover {
  background: #4b5563;
  border-color: #6b7280;
}

.avatar-container {
  position: relative;
  flex-shrink: 0;
}

.user-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  object-fit: cover;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dark .user-avatar {
  border-color: #374151;
}

.avatar-placeholder {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 1rem;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dark .avatar-placeholder {
  border-color: #374151;
}

.online-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: #dc2626;
  border: 2px solid #ffffff;
  z-index: 10;
}

.online-status.online {
  background: #10b981;
}

.dark .online-status {
  border-color: #374151;
}

.user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.username {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1e293b;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.dark .username {
  color: #f3f4f6;
}

.user-role {
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.dark .user-role {
  color: #9ca3af;
}

.dropdown-icon {
  width: 1rem;
  height: 1rem;
  color: #64748b;
  transition: transform 0.3s;
  flex-shrink: 0;
}

.user-profile:hover .dropdown-icon {
  transform: rotate(180deg);
}

.user-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 0.5rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  z-index: 50;
  min-width: 280px;
  animation: slideDown 0.2s ease-out;
}

.dark .user-dropdown {
  background: #374151;
  border-color: #4b5563;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
}

.user-profile-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: #f8fafc;
  border-radius: 0.75rem;
  margin-bottom: 1rem;
}

.dark .user-profile-card {
  background: #4b5563;
}

.user-avatar-large {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  object-fit: cover;
  border: 3px solid #ffffff;
}

.dark .user-avatar-large {
  border-color: #374151;
}

.avatar-placeholder-large {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 1.25rem;
  border: 3px solid #ffffff;
}

.dark .avatar-placeholder-large {
  border-color: #374151;
}

.user-details {
  flex: 1;
}

.user-details .username {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.user-email {
  font-size: 0.875rem;
  color: #64748b;
  margin-bottom: 0.5rem;
}

.dark .user-email {
  color: #9ca3af;
}

.user-role-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  color: white;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.dropdown-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 0.75rem 0;
}

.dark .dropdown-divider {
  background: #4b5563;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  color: #374151;
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
  font-size: 0.875rem;
  border: none;
  background: none;
}

.dropdown-item:hover {
  background: #f1f5f9;
  color: #3b82f6;
  transform: translateX(4px);
}

.dark .dropdown-item {
  color: #d1d5db;
}

.dark .dropdown-item:hover {
  background: #4b5563;
  color: #60a5fa;
}

.logout-btn {
  color: #dc2626;
  font-weight: 600;
}

.logout-btn:hover {
  color: #b91c1c;
  background: #fef2f2;
}

.dark .logout-btn:hover {
  color: #f87171;
  background: #7f1d1d;
}

/* 移动端搜索面板 */
.mobile-search-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 20%;
  backdrop-filter: blur(4px);
}

.search-header {
  position: relative;
  width: 90%;
  max-width: 400px;
  background: #ffffff;
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.dark .search-header {
  background: #374151;
}

.search-header .search-icon {
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

.search-header .search-input {
  padding-left: 3rem;
  border: 2px solid #e2e8f0;
}

.dark .search-header .search-input {
  border-color: #4b5563;
}

.close-btn {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: #f1f5f9;
  color: #64748b;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.close-btn:hover {
  background: #e2e8f0;
  color: #374151;
}

.dark .close-btn {
  background: #4b5563;
  color: #d1d5db;
}

.dark .close-btn:hover {
  background: #6b7280;
  color: #f3f4f6;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.breadcrumb-link {
  color: #6b7280;
  text-decoration: none;
  transition: color 0.3s;
}

.breadcrumb-link:hover {
  color: var(--primary-color);
}

.dark .breadcrumb-link {
  color: #9ca3af;
}

.dark .breadcrumb-link:hover {
  color: #60a5fa;
}

.breadcrumb-current {
  color: #111827;
  font-weight: 500;
}

.dark .breadcrumb-current {
  color: white;
}

.breadcrumb-separator {
  color: #9ca3af;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.action-btn {
  padding: 0.5rem;
  color: #6b7280;
  transition: color 0.3s;
  position: relative;
  border: none;
  background: none;
  cursor: pointer;
}

.action-btn:hover {
  color: var(--primary-color);
}

.dark .action-btn {
  color: #9ca3af;
}

.dark .action-btn:hover {
  color: #60a5fa;
}

.badge {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  background: #ef4444;
  color: white;
  font-size: 0.75rem;
  border-radius: 50%;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-menu {
  position: relative;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0.5rem;
  transition: background-color 0.3s;
  border: none;
  background: none;
}

.user-profile:hover {
  background-color: #f3f4f6;
}

.dark .user-profile:hover {
  background-color: #374151;
}

.user-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #e5e7eb;
}

.dark .user-avatar {
  background-color: #4b5563;
}

.user-info {
  text-align: left;
}

.username {
  font-size: 0.875rem;
  font-weight: 500;
  color: #111827;
}

.dark .username {
  color: white;
}

.user-role {
  font-size: 0.75rem;
  color: #6b7280;
}

.dark .user-role {
  color: #9ca3af;
}

.dropdown-icon {
  width: 0.75rem;
  height: 0.75rem;
  color: #9ca3af;
}

.user-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 0.25rem;
  background: white;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem;
  border: 1px solid var(--border-color);
  padding: 0.5rem 0;
  z-index: 50;
  min-width: 12rem;
}

.dark .user-dropdown {
  background: #1f2937;
  border-color: #374151;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  color: #374151;
  text-decoration: none;
  transition: background-color 0.3s;
}

.dropdown-item:hover {
  background-color: #f3f4f6;
}

.dark .dropdown-item {
  color: #d1d5db;
}

.dark .dropdown-item:hover {
  background-color: #374151;
}

.dropdown-divider {
  border-top: 1px solid var(--border-color);
  margin: 0.5rem 0;
}

.dark .dropdown-divider {
  border-color: #374151;
}

.logout-btn {
  color: #dc2626;
  transition: color 0.3s;
  border: none;
  background: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.logout-btn:hover {
  color: #b91c1c;
}

.dark .logout-btn {
  color: #f87171;
}

.dark .logout-btn:hover {
  color: #fca5a5;
}

/* 页面内容 */
.page-content {
  flex: 1;
  padding: 1.5rem;
}

.content-container {
  width: 100%;
  height: calc(100vh - 185px);
  overflow-y: auto;
  overflow-x: hidden;
}

.dark .content-container {
  border-color: #374151;
}

/* 页脚 */
.page-footer {
  background: white;
  border-top: 1px solid var(--border-color);
  padding: 1rem 1.5rem;
}

.dark .page-footer {
  background: #1f2937;
  border-color: #374151;
}

.footer-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
}

.copyright {
  color: #6b7280;
}

.dark .copyright {
  color: #9ca3af;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-link {
  color: #6b7280;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-link:hover {
  color: var(--primary-color);
}

.dark .footer-link {
  color: #9ca3af;
}

.dark .footer-link:hover {
  color: #60a5fa;
}

.footer-separator {
  color: #9ca3af;
}

/* 通知抽屉 */
.notification-drawer {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 50;
  display: flex;
  justify-content: flex-end;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid var(--border-color);
}

.dark .drawer-header {
  border-color: #374151;
}

.close-btn {
  padding: 0.5rem;
  color: #6b7280;
  transition: color 0.3s;
  border: none;
  background: none;
  cursor: pointer;
}

.close-btn:hover {
  color: #374151;
}

.notification-list {
  width: 24rem;
  background: white;
  height: 100%;
  overflow-y: auto;
}

.dark .notification-list {
  background: #1f2937;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 16rem;
  color: #6b7280;
}

.notification-item {
  display: flex;
  align-items: flex-start;
  padding: 1rem;
  border-bottom: 1px solid #f3f4f6;
  transition: background-color 0.3s;
}

.dark .notification-item {
  border-color: #374151;
}

.notification-item.unread {
  background-color: #eff6ff;
  border-left: 4px solid var(--primary-color);
}

.dark .notification-item.unread {
  background-color: #1e3a8a;
  border-left-color: #60a5fa;
}

.notification-icon {
  width: 2rem;
  height: 2rem;
  background: #dbeafe;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  margin-right: 0.75rem;
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.dark .notification-icon {
  background: #1e3a8a;
  color: #60a5fa;
}

.notification-content {
  flex: 1;
}

.notification-title {
  font-weight: 500;
  color: #111827;
  margin-bottom: 0.25rem;
}

.dark .notification-title {
  color: white;
}

.notification-message {
  font-size: 0.875rem;
  color: #6b7280;
  margin-bottom: 0.5rem;
}

.dark .notification-message {
  color: #9ca3af;
}

.notification-time {
  font-size: 0.75rem;
  color: #9ca3af;
}

.mark-read-btn {
  color: var(--primary-color);
  transition: color 0.3s;
  font-size: 0.875rem;
  border: none;
  background: none;
  cursor: pointer;
}

.mark-read-btn:hover {
  color: #0a49e0;
}

.dark .mark-read-btn {
  color: #60a5fa;
}

.dark .mark-read-btn:hover {
  color: #93c5fd;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.collapsed {
    transform: translateX(-100%);
  }

  .main-content {
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  .top-header {
    padding: 0.75rem 1rem;
  }

  .page-content {
    padding: 1rem;
  }

  .user-info {
    display: none;
  }

  .footer-content {
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
  }

  .notification-list {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .header-actions {
    gap: 0.25rem;
  }

  .breadcrumb {
    font-size: 0.75rem;
  }
}
</style>
